<template lang="pug">
	.top-tab-wrap
		label(@click="tab(index)" :class='{active:actIndex==index}' v-for="(item,index) in tabs" :key="index") {{item}}
		.ink-bar(:style="{'width':inkWidth+'px','left':inkLeft+'px'}")
</template>
<script>
export default {
	data() {
		return {
			actIndex: 0,
			inkWidth: 0,
			inkLeft: 0
		}
	},
	props: {
		tabs: {
			type: Array,
			default: () => []
		}
	},
	computed: {},
	mounted() {
		let that = this
		this.wx.getSystemInfo({
			success: function(res) {
				that.clientWidth = res.windowWidth
				that.inkWidth = that.clientWidth / that.tabs.length
			}
		})
	},
	onPullDownRefresh() {},
	onReachBottom() {},
	methods: {
		tab(index) {
			if (this.actIndex === index) return false
			this.actIndex = index
			this.inkLeft = this.clientWidth / this.tabs.length * this.actIndex
			this.$emit('listenClick', index)
		}
	},
	components: {}
}
</script>

<style lang="stylus">
	.top-tab-wrap
		height 100%
		position relative
		center()
		background-color white
		label
			flex 1
			display block
			font-size 30px
			text-align center
			position relative
			font-weight 500
			color blackFontColor1A
			&.active
				color themeColor
		.ink-bar
			position absolute
			bottom 6px
			height 3px
			background-color themeColor
			transform scale3d(0.2,1,1)
			transition left 0.3s ease
</style>
